<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>IconFont Demo</title>
  <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1344514" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">tiaoFangTiaoJi</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60b;</span>
                <div class="name">tongJiBaoBiaoGuanLi</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60c;</span>
                <div class="name">tiaoFangTiaoJiShenPi</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
                <div class="name">tongJiBiao</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60e;</span>
                <div class="name">wangGuang</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">yongYaoJiLu</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">zuZhiJiaGou</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe611;</span>
                <div class="name">yongYaoJiLuGuanLi</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
                <div class="name">xinXiFaBu</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">daiBanShiXiang</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe614;</span>
                <div class="name">banZhangRiZhiGuanLi</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">baoJinJiLu</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe616;</span>
                <div class="name">baoJingQi</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe617;</span>
                <div class="name">anQuanJianChaRiZhi</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe618;</span>
                <div class="name">ziXunJiLu</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe619;</span>
                <div class="name">chuYuanShenQing</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61a;</span>
                <div class="name">chuangWeiBangDing</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61b;</span>
                <div class="name">banZhangRiZhi</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61c;</span>
                <div class="name">chuangWeiShiTu（2）</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61d;</span>
                <div class="name">bangDingMenJinKa</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
                <div class="name">benZhouPaiBanJiHua</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61f;</span>
                <div class="name">chuangWeiShiTu</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">chuangDianXinXi</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">chuangWeiChongPai</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe622;</span>
                <div class="name">chuangDian</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe623;</span>
                <div class="name">fangJianBangDing</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe624;</span>
                <div class="name">chuYuanShenQingShenPi</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe625;</span>
                <div class="name">chuangWeiXinZeng</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe626;</span>
                <div class="name">chuangWeiGuanLi</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe627;</span>
                <div class="name">feiYongLeiBei</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe628;</span>
                <div class="name">fuLiYuanJieShao</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">huGongGuanLi</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62a;</span>
                <div class="name">xiaoXiTuiSongPeiZhi</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
                <div class="name">gongZuoRiZhi</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62c;</span>
                <div class="name">huLiRiZhiGuanLi</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62d;</span>
                <div class="name">dianFeiDanJia</div>
                <div class="code-name">&amp;#xe62d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62e;</span>
                <div class="name">huGongPaiBanFangAn</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62f;</span>
                <div class="name">fangJianShiTu</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe630;</span>
                <div class="name">jiaoBanRiZhiChaKan</div>
                <div class="code-name">&amp;#xe630;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe631;</span>
                <div class="name">geRenZhongXin</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe632;</span>
                <div class="name">huGongGuanLiRiZhi</div>
                <div class="code-name">&amp;#xe632;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe633;</span>
                <div class="name">jinJiAnNiu</div>
                <div class="code-name">&amp;#xe633;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe634;</span>
                <div class="name">huGongJiaoBanRiZhi</div>
                <div class="code-name">&amp;#xe634;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe635;</span>
                <div class="name">laoRenLieBiao</div>
                <div class="code-name">&amp;#xe635;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe636;</span>
                <div class="name">laoRenShengRi</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe637;</span>
                <div class="name">louDongShiTu</div>
                <div class="code-name">&amp;#xe637;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe638;</span>
                <div class="name">meiYueFeiYongYuJiao</div>
                <div class="code-name">&amp;#xe638;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe639;</span>
                <div class="name">laoRenQingJia</div>
                <div class="code-name">&amp;#xe639;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63a;</span>
                <div class="name">menJinWaiChuJiLu</div>
                <div class="code-name">&amp;#xe63a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63b;</span>
                <div class="name">menJin</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63c;</span>
                <div class="name">menJinZu</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63d;</span>
                <div class="name">meiZhouCaiDan</div>
                <div class="code-name">&amp;#xe63d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63e;</span>
                <div class="name">meiYueJiaoFei</div>
                <div class="code-name">&amp;#xe63e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63f;</span>
                <div class="name">laoRenXinXi</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe640;</span>
                <div class="name">pingGuJiLu</div>
                <div class="code-name">&amp;#xe640;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe641;</span>
                <div class="name">paiBanJiHuaShenPi</div>
                <div class="code-name">&amp;#xe641;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe642;</span>
                <div class="name">menWeiBaoJinDeng</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe643;</span>
                <div class="name">qiTaJiaoFeiJiLuDan</div>
                <div class="code-name">&amp;#xe643;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe644;</span>
                <div class="name">ruYuanBanLi</div>
                <div class="code-name">&amp;#xe644;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe645;</span>
                <div class="name">quanXiaoGuanLi</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe646;</span>
                <div class="name">renTiGanYing</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe647;</span>
                <div class="name">shouHuanBangDing</div>
                <div class="code-name">&amp;#xe647;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe648;</span>
                <div class="name">quXiaoYuYue</div>
                <div class="code-name">&amp;#xe648;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe649;</span>
                <div class="name">riChuangChuangDian</div>
                <div class="code-name">&amp;#xe649;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64a;</span>
                <div class="name">shouHuan</div>
                <div class="code-name">&amp;#xe64a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64b;</span>
                <div class="name">menJinKa</div>
                <div class="code-name">&amp;#xe64b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64c;</span>
                <div class="name">shiWuGuanLi</div>
                <div class="code-name">&amp;#xe64c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64d;</span>
                <div class="name">tiJianJiLu</div>
                <div class="code-name">&amp;#xe64d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64e;</span>
                <div class="name">shuJuZhiDian</div>
                <div class="code-name">&amp;#xe64e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64f;</span>
                <div class="name">jiaoFeiJiLuDan</div>
                <div class="code-name">&amp;#xe64f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe650;</span>
                <div class="name">sheZhiYuZhi</div>
                <div class="code-name">&amp;#xe650;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe651;</span>
                <div class="name">suiFangYi</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe652;</span>
                <div class="name">renYuanLeiBieJianMian</div>
                <div class="code-name">&amp;#xe652;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe653;</span>
                <div class="name">wifi</div>
                <div class="code-name">&amp;#xe653;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe654;</span>
                <div class="name">shebei</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe655;</span>
                <div class="name">zhiyuan</div>
                <div class="code-name">&amp;#xe655;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe656;</span>
                <div class="name">home</div>
                <div class="code-name">&amp;#xe656;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe657;</span>
                <div class="name">tiaofangtiaoji</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe658;</span>
                <div class="name">zixun</div>
                <div class="code-name">&amp;#xe658;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe659;</span>
                <div class="name">otherjiaofei</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65a;</span>
                <div class="name">yujiao</div>
                <div class="code-name">&amp;#xe65a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65b;</span>
                <div class="name">feiyongjiesuan</div>
                <div class="code-name">&amp;#xe65b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65c;</span>
                <div class="name">fuwufeiyongtongji</div>
                <div class="code-name">&amp;#xe65c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65d;</span>
                <div class="name">chuyuanguanli</div>
                <div class="code-name">&amp;#xe65d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65e;</span>
                <div class="name">chuyuanliebiao</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65f;</span>
                <div class="name">huliguanli</div>
                <div class="code-name">&amp;#xe65f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe660;</span>
                <div class="name">huliguanli</div>
                <div class="code-name">&amp;#xe660;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe661;</span>
                <div class="name">yueduhuizong</div>
                <div class="code-name">&amp;#xe661;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe662;</span>
                <div class="name">fuwuguanli</div>
                <div class="code-name">&amp;#xe662;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe663;</span>
                <div class="name">fuwugongdan</div>
                <div class="code-name">&amp;#xe663;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe664;</span>
                <div class="name">fuwurenyuan</div>
                <div class="code-name">&amp;#xe664;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe665;</span>
                <div class="name">fuwuleibie</div>
                <div class="code-name">&amp;#xe665;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe666;</span>
                <div class="name">tousugongdan</div>
                <div class="code-name">&amp;#xe666;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe667;</span>
                <div class="name">hujiaogongdan</div>
                <div class="code-name">&amp;#xe667;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe668;</span>
                <div class="name">hujiaogunali</div>
                <div class="code-name">&amp;#xe668;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe669;</span>
                <div class="name">hujiaoxinxi</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66a;</span>
                <div class="name">hujiaozhongxin</div>
                <div class="code-name">&amp;#xe66a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66b;</span>
                <div class="name">menjinkaquanxian</div>
                <div class="code-name">&amp;#xe66b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66c;</span>
                <div class="name">menjinkongzhika</div>
                <div class="code-name">&amp;#xe66c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66d;</span>
                <div class="name">yule</div>
                <div class="code-name">&amp;#xe66d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66e;</span>
                <div class="name">yule_music</div>
                <div class="code-name">&amp;#xe66e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66f;</span>
                <div class="name">yule_video</div>
                <div class="code-name">&amp;#xe66f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe670;</span>
                <div class="name">yule_voice</div>
                <div class="code-name">&amp;#xe670;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe671;</span>
                <div class="name">fuwuzuguanli</div>
                <div class="code-name">&amp;#xe671;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe672;</span>
                <div class="name">kongzhika</div>
                <div class="code-name">&amp;#xe672;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe673;</span>
                <div class="name">menjinkongzhika</div>
                <div class="code-name">&amp;#xe673;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe674;</span>
                <div class="name">chuangtoupin</div>
                <div class="code-name">&amp;#xe674;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icontiaofangtiaoji"></span>
            <div class="name">
              tiaoFangTiaoJi
            </div>
            <div class="code-name">.icontiaofangtiaoji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontongjibaobiaoguanli"></span>
            <div class="name">
              tongJiBaoBiaoGuanLi
            </div>
            <div class="code-name">.icontongjibaobiaoguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontiaofangtiaojishenpi"></span>
            <div class="name">
              tiaoFangTiaoJiShenPi
            </div>
            <div class="code-name">.icontiaofangtiaojishenpi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontongjibiao"></span>
            <div class="name">
              tongJiBiao
            </div>
            <div class="code-name">.icontongjibiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconwangguan"></span>
            <div class="name">
              wangGuang
            </div>
            <div class="code-name">.iconwangguan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyongyaojilu"></span>
            <div class="name">
              yongYaoJiLu
            </div>
            <div class="code-name">.iconyongyaojilu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconzuzhijiagou"></span>
            <div class="name">
              zuZhiJiaGou
            </div>
            <div class="code-name">.iconzuzhijiagou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyongyaojiluguanli"></span>
            <div class="name">
              yongYaoJiLuGuanLi
            </div>
            <div class="code-name">.iconyongyaojiluguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconxinxifabu"></span>
            <div class="name">
              xinXiFaBu
            </div>
            <div class="code-name">.iconxinxifabu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondaibanshixiang"></span>
            <div class="name">
              daiBanShiXiang
            </div>
            <div class="code-name">.icondaibanshixiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconbanchangrizhiguanli"></span>
            <div class="name">
              banZhangRiZhiGuanLi
            </div>
            <div class="code-name">.iconbanchangrizhiguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconbaojingjilu"></span>
            <div class="name">
              baoJinJiLu
            </div>
            <div class="code-name">.iconbaojingjilu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconbaojingqi"></span>
            <div class="name">
              baoJingQi
            </div>
            <div class="code-name">.iconbaojingqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconanquanjiancharizhi"></span>
            <div class="name">
              anQuanJianChaRiZhi
            </div>
            <div class="code-name">.iconanquanjiancharizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconzixunjilu"></span>
            <div class="name">
              ziXunJiLu
            </div>
            <div class="code-name">.iconzixunjilu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconchuyuanshenqing"></span>
            <div class="name">
              chuYuanShenQing
            </div>
            <div class="code-name">.iconchuyuanshenqing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconchuangweibangding"></span>
            <div class="name">
              chuangWeiBangDing
            </div>
            <div class="code-name">.iconchuangweibangding
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconbanchangrizhi"></span>
            <div class="name">
              banZhangRiZhi
            </div>
            <div class="code-name">.iconbanchangrizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconchuangweishitu"></span>
            <div class="name">
              chuangWeiShiTu（2）
            </div>
            <div class="code-name">.iconchuangweishitu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconbangdingmenjinka"></span>
            <div class="name">
              bangDingMenJinKa
            </div>
            <div class="code-name">.iconbangdingmenjinka
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconbenzhoupaibanjihua"></span>
            <div class="name">
              benZhouPaiBanJiHua
            </div>
            <div class="code-name">.iconbenzhoupaibanjihua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconchuangweishitu1"></span>
            <div class="name">
              chuangWeiShiTu
            </div>
            <div class="code-name">.iconchuangweishitu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconchuangdianxinxi"></span>
            <div class="name">
              chuangDianXinXi
            </div>
            <div class="code-name">.iconchuangdianxinxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconchuangweizhongpai"></span>
            <div class="name">
              chuangWeiChongPai
            </div>
            <div class="code-name">.iconchuangweizhongpai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconchuangdian"></span>
            <div class="name">
              chuangDian
            </div>
            <div class="code-name">.iconchuangdian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfangjianbangding"></span>
            <div class="name">
              fangJianBangDing
            </div>
            <div class="code-name">.iconfangjianbangding
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconchuyuanshenqingshenpi"></span>
            <div class="name">
              chuYuanShenQingShenPi
            </div>
            <div class="code-name">.iconchuyuanshenqingshenpi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconchuangweixinzeng"></span>
            <div class="name">
              chuangWeiXinZeng
            </div>
            <div class="code-name">.iconchuangweixinzeng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconchuangweiguanli"></span>
            <div class="name">
              chuangWeiGuanLi
            </div>
            <div class="code-name">.iconchuangweiguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfeiyongleibie"></span>
            <div class="name">
              feiYongLeiBei
            </div>
            <div class="code-name">.iconfeiyongleibie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfuliyuanjieshao"></span>
            <div class="name">
              fuLiYuanJieShao
            </div>
            <div class="code-name">.iconfuliyuanjieshao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconhugongguanli"></span>
            <div class="name">
              huGongGuanLi
            </div>
            <div class="code-name">.iconhugongguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconduanxintuisongpeizhi"></span>
            <div class="name">
              xiaoXiTuiSongPeiZhi
            </div>
            <div class="code-name">.iconduanxintuisongpeizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icongongzuorizhi"></span>
            <div class="name">
              gongZuoRiZhi
            </div>
            <div class="code-name">.icongongzuorizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconhulirizhiguanli"></span>
            <div class="name">
              huLiRiZhiGuanLi
            </div>
            <div class="code-name">.iconhulirizhiguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondianfeidanjia"></span>
            <div class="name">
              dianFeiDanJia
            </div>
            <div class="code-name">.icondianfeidanjia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconhugongpaibanfangan"></span>
            <div class="name">
              huGongPaiBanFangAn
            </div>
            <div class="code-name">.iconhugongpaibanfangan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfangjianshitu"></span>
            <div class="name">
              fangJianShiTu
            </div>
            <div class="code-name">.iconfangjianshitu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconjiaobanrizhichakan"></span>
            <div class="name">
              jiaoBanRiZhiChaKan
            </div>
            <div class="code-name">.iconjiaobanrizhichakan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icongerenzhongxin"></span>
            <div class="name">
              geRenZhongXin
            </div>
            <div class="code-name">.icongerenzhongxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconhugonghulirizhi"></span>
            <div class="name">
              huGongGuanLiRiZhi
            </div>
            <div class="code-name">.iconhugonghulirizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconjinjianniu"></span>
            <div class="name">
              jinJiAnNiu
            </div>
            <div class="code-name">.iconjinjianniu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconhugongjiaobanrizhi"></span>
            <div class="name">
              huGongJiaoBanRiZhi
            </div>
            <div class="code-name">.iconhugongjiaobanrizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconlaorenliebiao"></span>
            <div class="name">
              laoRenLieBiao
            </div>
            <div class="code-name">.iconlaorenliebiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconlaorenshengri"></span>
            <div class="name">
              laoRenShengRi
            </div>
            <div class="code-name">.iconlaorenshengri
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconloudongshitu"></span>
            <div class="name">
              louDongShiTu
            </div>
            <div class="code-name">.iconloudongshitu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconmeiyuefeiyongyujiao"></span>
            <div class="name">
              meiYueFeiYongYuJiao
            </div>
            <div class="code-name">.iconmeiyuefeiyongyujiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconlaorenqingjia"></span>
            <div class="name">
              laoRenQingJia
            </div>
            <div class="code-name">.iconlaorenqingjia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconmenjinwaichujilu"></span>
            <div class="name">
              menJinWaiChuJiLu
            </div>
            <div class="code-name">.iconmenjinwaichujilu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconmenjin"></span>
            <div class="name">
              menJin
            </div>
            <div class="code-name">.iconmenjin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconmenjinzusvg"></span>
            <div class="name">
              menJinZu
            </div>
            <div class="code-name">.iconmenjinzusvg
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconmeizhoucaidan"></span>
            <div class="name">
              meiZhouCaiDan
            </div>
            <div class="code-name">.iconmeizhoucaidan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconmeiyuejiaofei"></span>
            <div class="name">
              meiYueJiaoFei
            </div>
            <div class="code-name">.iconmeiyuejiaofei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconlaorenxinxi"></span>
            <div class="name">
              laoRenXinXi
            </div>
            <div class="code-name">.iconlaorenxinxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconpinggujilu"></span>
            <div class="name">
              pingGuJiLu
            </div>
            <div class="code-name">.iconpinggujilu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconpaibanjihuashenpi"></span>
            <div class="name">
              paiBanJiHuaShenPi
            </div>
            <div class="code-name">.iconpaibanjihuashenpi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconmenweibaojingdeng"></span>
            <div class="name">
              menWeiBaoJinDeng
            </div>
            <div class="code-name">.iconmenweibaojingdeng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconqitajiaofeijiludan"></span>
            <div class="name">
              qiTaJiaoFeiJiLuDan
            </div>
            <div class="code-name">.iconqitajiaofeijiludan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconruyuanbanli"></span>
            <div class="name">
              ruYuanBanLi
            </div>
            <div class="code-name">.iconruyuanbanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconquanxianguanli"></span>
            <div class="name">
              quanXiaoGuanLi
            </div>
            <div class="code-name">.iconquanxianguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconrentiganying"></span>
            <div class="name">
              renTiGanYing
            </div>
            <div class="code-name">.iconrentiganying
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshouhuanbangding"></span>
            <div class="name">
              shouHuanBangDing
            </div>
            <div class="code-name">.iconshouhuanbangding
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconquxiaoyuyue"></span>
            <div class="name">
              quXiaoYuYue
            </div>
            <div class="code-name">.iconquxiaoyuyue
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconrichuangchuangdian"></span>
            <div class="name">
              riChuangChuangDian
            </div>
            <div class="code-name">.iconrichuangchuangdian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshouhuan"></span>
            <div class="name">
              shouHuan
            </div>
            <div class="code-name">.iconshouhuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconmenjinka"></span>
            <div class="name">
              menJinKa
            </div>
            <div class="code-name">.iconmenjinka
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshiwuguanli"></span>
            <div class="name">
              shiWuGuanLi
            </div>
            <div class="code-name">.iconshiwuguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontijianjilu"></span>
            <div class="name">
              tiJianJiLu
            </div>
            <div class="code-name">.icontijianjilu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshujuzidian"></span>
            <div class="name">
              shuJuZhiDian
            </div>
            <div class="code-name">.iconshujuzidian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconjiaofeijiludan"></span>
            <div class="name">
              jiaoFeiJiLuDan
            </div>
            <div class="code-name">.iconjiaofeijiludan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshezhiyuzhi"></span>
            <div class="name">
              sheZhiYuZhi
            </div>
            <div class="code-name">.iconshezhiyuzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsuifangyi"></span>
            <div class="name">
              suiFangYi
            </div>
            <div class="code-name">.iconsuifangyi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconrenyuanleibiejianmian"></span>
            <div class="name">
              renYuanLeiBieJianMian
            </div>
            <div class="code-name">.iconrenyuanleibiejianmian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconwifi"></span>
            <div class="name">
              wifi
            </div>
            <div class="code-name">.iconwifi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshebei"></span>
            <div class="name">
              shebei
            </div>
            <div class="code-name">.iconshebei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconzhiyuan"></span>
            <div class="name">
              zhiyuan
            </div>
            <div class="code-name">.iconzhiyuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconhome"></span>
            <div class="name">
              home
            </div>
            <div class="code-name">.iconhome
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontiaofangtiaoji1"></span>
            <div class="name">
              tiaofangtiaoji
            </div>
            <div class="code-name">.icontiaofangtiaoji1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconzixun"></span>
            <div class="name">
              zixun
            </div>
            <div class="code-name">.iconzixun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconotherjiaofei"></span>
            <div class="name">
              otherjiaofei
            </div>
            <div class="code-name">.iconotherjiaofei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyujiao"></span>
            <div class="name">
              yujiao
            </div>
            <div class="code-name">.iconyujiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfeiyongjiesuan"></span>
            <div class="name">
              feiyongjiesuan
            </div>
            <div class="code-name">.iconfeiyongjiesuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfuwufeiyongtongji"></span>
            <div class="name">
              fuwufeiyongtongji
            </div>
            <div class="code-name">.iconfuwufeiyongtongji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconchuyuanguanli"></span>
            <div class="name">
              chuyuanguanli
            </div>
            <div class="code-name">.iconchuyuanguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconchuyuanliebiao"></span>
            <div class="name">
              chuyuanliebiao
            </div>
            <div class="code-name">.iconchuyuanliebiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconhuliguanli"></span>
            <div class="name">
              huliguanli
            </div>
            <div class="code-name">.iconhuliguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconhuliguanli1"></span>
            <div class="name">
              huliguanli
            </div>
            <div class="code-name">.iconhuliguanli1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyueduhuizong"></span>
            <div class="name">
              yueduhuizong
            </div>
            <div class="code-name">.iconyueduhuizong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfuwuguanli"></span>
            <div class="name">
              fuwuguanli
            </div>
            <div class="code-name">.iconfuwuguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfuwugongdan"></span>
            <div class="name">
              fuwugongdan
            </div>
            <div class="code-name">.iconfuwugongdan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfuwurenyuan"></span>
            <div class="name">
              fuwurenyuan
            </div>
            <div class="code-name">.iconfuwurenyuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfuwuleibie"></span>
            <div class="name">
              fuwuleibie
            </div>
            <div class="code-name">.iconfuwuleibie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontousugongdan"></span>
            <div class="name">
              tousugongdan
            </div>
            <div class="code-name">.icontousugongdan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconhujiaogongdan"></span>
            <div class="name">
              hujiaogongdan
            </div>
            <div class="code-name">.iconhujiaogongdan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconhujiaogunali"></span>
            <div class="name">
              hujiaogunali
            </div>
            <div class="code-name">.iconhujiaogunali
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconhujiaoxinxi"></span>
            <div class="name">
              hujiaoxinxi
            </div>
            <div class="code-name">.iconhujiaoxinxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconhujiaozhongxin"></span>
            <div class="name">
              hujiaozhongxin
            </div>
            <div class="code-name">.iconhujiaozhongxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconmenjinkaquanxian"></span>
            <div class="name">
              menjinkaquanxian
            </div>
            <div class="code-name">.iconmenjinkaquanxian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconmenjinkongzhika"></span>
            <div class="name">
              menjinkongzhika
            </div>
            <div class="code-name">.iconmenjinkongzhika
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyule"></span>
            <div class="name">
              yule
            </div>
            <div class="code-name">.iconyule
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyule_music"></span>
            <div class="name">
              yule_music
            </div>
            <div class="code-name">.iconyule_music
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyule_video"></span>
            <div class="name">
              yule_video
            </div>
            <div class="code-name">.iconyule_video
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyule_voice"></span>
            <div class="name">
              yule_voice
            </div>
            <div class="code-name">.iconyule_voice
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfuwuzuguanli"></span>
            <div class="name">
              fuwuzuguanli
            </div>
            <div class="code-name">.iconfuwuzuguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconkongzhika"></span>
            <div class="name">
              kongzhika
            </div>
            <div class="code-name">.iconkongzhika
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconmenjinkongzhika1"></span>
            <div class="name">
              menjinkongzhika
            </div>
            <div class="code-name">.iconmenjinkongzhika1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconchuangtoupin"></span>
            <div class="name">
              chuangtoupin
            </div>
            <div class="code-name">.iconchuangtoupin
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont iconxxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontiaofangtiaoji"></use>
                </svg>
                <div class="name">tiaoFangTiaoJi</div>
                <div class="code-name">#icontiaofangtiaoji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontongjibaobiaoguanli"></use>
                </svg>
                <div class="name">tongJiBaoBiaoGuanLi</div>
                <div class="code-name">#icontongjibaobiaoguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontiaofangtiaojishenpi"></use>
                </svg>
                <div class="name">tiaoFangTiaoJiShenPi</div>
                <div class="code-name">#icontiaofangtiaojishenpi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontongjibiao"></use>
                </svg>
                <div class="name">tongJiBiao</div>
                <div class="code-name">#icontongjibiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconwangguan"></use>
                </svg>
                <div class="name">wangGuang</div>
                <div class="code-name">#iconwangguan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyongyaojilu"></use>
                </svg>
                <div class="name">yongYaoJiLu</div>
                <div class="code-name">#iconyongyaojilu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconzuzhijiagou"></use>
                </svg>
                <div class="name">zuZhiJiaGou</div>
                <div class="code-name">#iconzuzhijiagou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyongyaojiluguanli"></use>
                </svg>
                <div class="name">yongYaoJiLuGuanLi</div>
                <div class="code-name">#iconyongyaojiluguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconxinxifabu"></use>
                </svg>
                <div class="name">xinXiFaBu</div>
                <div class="code-name">#iconxinxifabu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondaibanshixiang"></use>
                </svg>
                <div class="name">daiBanShiXiang</div>
                <div class="code-name">#icondaibanshixiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconbanchangrizhiguanli"></use>
                </svg>
                <div class="name">banZhangRiZhiGuanLi</div>
                <div class="code-name">#iconbanchangrizhiguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconbaojingjilu"></use>
                </svg>
                <div class="name">baoJinJiLu</div>
                <div class="code-name">#iconbaojingjilu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconbaojingqi"></use>
                </svg>
                <div class="name">baoJingQi</div>
                <div class="code-name">#iconbaojingqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconanquanjiancharizhi"></use>
                </svg>
                <div class="name">anQuanJianChaRiZhi</div>
                <div class="code-name">#iconanquanjiancharizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconzixunjilu"></use>
                </svg>
                <div class="name">ziXunJiLu</div>
                <div class="code-name">#iconzixunjilu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconchuyuanshenqing"></use>
                </svg>
                <div class="name">chuYuanShenQing</div>
                <div class="code-name">#iconchuyuanshenqing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconchuangweibangding"></use>
                </svg>
                <div class="name">chuangWeiBangDing</div>
                <div class="code-name">#iconchuangweibangding</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconbanchangrizhi"></use>
                </svg>
                <div class="name">banZhangRiZhi</div>
                <div class="code-name">#iconbanchangrizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconchuangweishitu"></use>
                </svg>
                <div class="name">chuangWeiShiTu（2）</div>
                <div class="code-name">#iconchuangweishitu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconbangdingmenjinka"></use>
                </svg>
                <div class="name">bangDingMenJinKa</div>
                <div class="code-name">#iconbangdingmenjinka</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconbenzhoupaibanjihua"></use>
                </svg>
                <div class="name">benZhouPaiBanJiHua</div>
                <div class="code-name">#iconbenzhoupaibanjihua</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconchuangweishitu1"></use>
                </svg>
                <div class="name">chuangWeiShiTu</div>
                <div class="code-name">#iconchuangweishitu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconchuangdianxinxi"></use>
                </svg>
                <div class="name">chuangDianXinXi</div>
                <div class="code-name">#iconchuangdianxinxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconchuangweizhongpai"></use>
                </svg>
                <div class="name">chuangWeiChongPai</div>
                <div class="code-name">#iconchuangweizhongpai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconchuangdian"></use>
                </svg>
                <div class="name">chuangDian</div>
                <div class="code-name">#iconchuangdian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfangjianbangding"></use>
                </svg>
                <div class="name">fangJianBangDing</div>
                <div class="code-name">#iconfangjianbangding</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconchuyuanshenqingshenpi"></use>
                </svg>
                <div class="name">chuYuanShenQingShenPi</div>
                <div class="code-name">#iconchuyuanshenqingshenpi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconchuangweixinzeng"></use>
                </svg>
                <div class="name">chuangWeiXinZeng</div>
                <div class="code-name">#iconchuangweixinzeng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconchuangweiguanli"></use>
                </svg>
                <div class="name">chuangWeiGuanLi</div>
                <div class="code-name">#iconchuangweiguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfeiyongleibie"></use>
                </svg>
                <div class="name">feiYongLeiBei</div>
                <div class="code-name">#iconfeiyongleibie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfuliyuanjieshao"></use>
                </svg>
                <div class="name">fuLiYuanJieShao</div>
                <div class="code-name">#iconfuliyuanjieshao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconhugongguanli"></use>
                </svg>
                <div class="name">huGongGuanLi</div>
                <div class="code-name">#iconhugongguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconduanxintuisongpeizhi"></use>
                </svg>
                <div class="name">xiaoXiTuiSongPeiZhi</div>
                <div class="code-name">#iconduanxintuisongpeizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icongongzuorizhi"></use>
                </svg>
                <div class="name">gongZuoRiZhi</div>
                <div class="code-name">#icongongzuorizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconhulirizhiguanli"></use>
                </svg>
                <div class="name">huLiRiZhiGuanLi</div>
                <div class="code-name">#iconhulirizhiguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondianfeidanjia"></use>
                </svg>
                <div class="name">dianFeiDanJia</div>
                <div class="code-name">#icondianfeidanjia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconhugongpaibanfangan"></use>
                </svg>
                <div class="name">huGongPaiBanFangAn</div>
                <div class="code-name">#iconhugongpaibanfangan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfangjianshitu"></use>
                </svg>
                <div class="name">fangJianShiTu</div>
                <div class="code-name">#iconfangjianshitu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconjiaobanrizhichakan"></use>
                </svg>
                <div class="name">jiaoBanRiZhiChaKan</div>
                <div class="code-name">#iconjiaobanrizhichakan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icongerenzhongxin"></use>
                </svg>
                <div class="name">geRenZhongXin</div>
                <div class="code-name">#icongerenzhongxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconhugonghulirizhi"></use>
                </svg>
                <div class="name">huGongGuanLiRiZhi</div>
                <div class="code-name">#iconhugonghulirizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconjinjianniu"></use>
                </svg>
                <div class="name">jinJiAnNiu</div>
                <div class="code-name">#iconjinjianniu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconhugongjiaobanrizhi"></use>
                </svg>
                <div class="name">huGongJiaoBanRiZhi</div>
                <div class="code-name">#iconhugongjiaobanrizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconlaorenliebiao"></use>
                </svg>
                <div class="name">laoRenLieBiao</div>
                <div class="code-name">#iconlaorenliebiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconlaorenshengri"></use>
                </svg>
                <div class="name">laoRenShengRi</div>
                <div class="code-name">#iconlaorenshengri</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconloudongshitu"></use>
                </svg>
                <div class="name">louDongShiTu</div>
                <div class="code-name">#iconloudongshitu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconmeiyuefeiyongyujiao"></use>
                </svg>
                <div class="name">meiYueFeiYongYuJiao</div>
                <div class="code-name">#iconmeiyuefeiyongyujiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconlaorenqingjia"></use>
                </svg>
                <div class="name">laoRenQingJia</div>
                <div class="code-name">#iconlaorenqingjia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconmenjinwaichujilu"></use>
                </svg>
                <div class="name">menJinWaiChuJiLu</div>
                <div class="code-name">#iconmenjinwaichujilu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconmenjin"></use>
                </svg>
                <div class="name">menJin</div>
                <div class="code-name">#iconmenjin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconmenjinzusvg"></use>
                </svg>
                <div class="name">menJinZu</div>
                <div class="code-name">#iconmenjinzusvg</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconmeizhoucaidan"></use>
                </svg>
                <div class="name">meiZhouCaiDan</div>
                <div class="code-name">#iconmeizhoucaidan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconmeiyuejiaofei"></use>
                </svg>
                <div class="name">meiYueJiaoFei</div>
                <div class="code-name">#iconmeiyuejiaofei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconlaorenxinxi"></use>
                </svg>
                <div class="name">laoRenXinXi</div>
                <div class="code-name">#iconlaorenxinxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconpinggujilu"></use>
                </svg>
                <div class="name">pingGuJiLu</div>
                <div class="code-name">#iconpinggujilu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconpaibanjihuashenpi"></use>
                </svg>
                <div class="name">paiBanJiHuaShenPi</div>
                <div class="code-name">#iconpaibanjihuashenpi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconmenweibaojingdeng"></use>
                </svg>
                <div class="name">menWeiBaoJinDeng</div>
                <div class="code-name">#iconmenweibaojingdeng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconqitajiaofeijiludan"></use>
                </svg>
                <div class="name">qiTaJiaoFeiJiLuDan</div>
                <div class="code-name">#iconqitajiaofeijiludan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconruyuanbanli"></use>
                </svg>
                <div class="name">ruYuanBanLi</div>
                <div class="code-name">#iconruyuanbanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconquanxianguanli"></use>
                </svg>
                <div class="name">quanXiaoGuanLi</div>
                <div class="code-name">#iconquanxianguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconrentiganying"></use>
                </svg>
                <div class="name">renTiGanYing</div>
                <div class="code-name">#iconrentiganying</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshouhuanbangding"></use>
                </svg>
                <div class="name">shouHuanBangDing</div>
                <div class="code-name">#iconshouhuanbangding</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconquxiaoyuyue"></use>
                </svg>
                <div class="name">quXiaoYuYue</div>
                <div class="code-name">#iconquxiaoyuyue</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconrichuangchuangdian"></use>
                </svg>
                <div class="name">riChuangChuangDian</div>
                <div class="code-name">#iconrichuangchuangdian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshouhuan"></use>
                </svg>
                <div class="name">shouHuan</div>
                <div class="code-name">#iconshouhuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconmenjinka"></use>
                </svg>
                <div class="name">menJinKa</div>
                <div class="code-name">#iconmenjinka</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshiwuguanli"></use>
                </svg>
                <div class="name">shiWuGuanLi</div>
                <div class="code-name">#iconshiwuguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontijianjilu"></use>
                </svg>
                <div class="name">tiJianJiLu</div>
                <div class="code-name">#icontijianjilu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshujuzidian"></use>
                </svg>
                <div class="name">shuJuZhiDian</div>
                <div class="code-name">#iconshujuzidian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconjiaofeijiludan"></use>
                </svg>
                <div class="name">jiaoFeiJiLuDan</div>
                <div class="code-name">#iconjiaofeijiludan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshezhiyuzhi"></use>
                </svg>
                <div class="name">sheZhiYuZhi</div>
                <div class="code-name">#iconshezhiyuzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsuifangyi"></use>
                </svg>
                <div class="name">suiFangYi</div>
                <div class="code-name">#iconsuifangyi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconrenyuanleibiejianmian"></use>
                </svg>
                <div class="name">renYuanLeiBieJianMian</div>
                <div class="code-name">#iconrenyuanleibiejianmian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconwifi"></use>
                </svg>
                <div class="name">wifi</div>
                <div class="code-name">#iconwifi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshebei"></use>
                </svg>
                <div class="name">shebei</div>
                <div class="code-name">#iconshebei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconzhiyuan"></use>
                </svg>
                <div class="name">zhiyuan</div>
                <div class="code-name">#iconzhiyuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconhome"></use>
                </svg>
                <div class="name">home</div>
                <div class="code-name">#iconhome</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontiaofangtiaoji1"></use>
                </svg>
                <div class="name">tiaofangtiaoji</div>
                <div class="code-name">#icontiaofangtiaoji1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconzixun"></use>
                </svg>
                <div class="name">zixun</div>
                <div class="code-name">#iconzixun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconotherjiaofei"></use>
                </svg>
                <div class="name">otherjiaofei</div>
                <div class="code-name">#iconotherjiaofei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyujiao"></use>
                </svg>
                <div class="name">yujiao</div>
                <div class="code-name">#iconyujiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfeiyongjiesuan"></use>
                </svg>
                <div class="name">feiyongjiesuan</div>
                <div class="code-name">#iconfeiyongjiesuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfuwufeiyongtongji"></use>
                </svg>
                <div class="name">fuwufeiyongtongji</div>
                <div class="code-name">#iconfuwufeiyongtongji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconchuyuanguanli"></use>
                </svg>
                <div class="name">chuyuanguanli</div>
                <div class="code-name">#iconchuyuanguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconchuyuanliebiao"></use>
                </svg>
                <div class="name">chuyuanliebiao</div>
                <div class="code-name">#iconchuyuanliebiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconhuliguanli"></use>
                </svg>
                <div class="name">huliguanli</div>
                <div class="code-name">#iconhuliguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconhuliguanli1"></use>
                </svg>
                <div class="name">huliguanli</div>
                <div class="code-name">#iconhuliguanli1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyueduhuizong"></use>
                </svg>
                <div class="name">yueduhuizong</div>
                <div class="code-name">#iconyueduhuizong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfuwuguanli"></use>
                </svg>
                <div class="name">fuwuguanli</div>
                <div class="code-name">#iconfuwuguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfuwugongdan"></use>
                </svg>
                <div class="name">fuwugongdan</div>
                <div class="code-name">#iconfuwugongdan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfuwurenyuan"></use>
                </svg>
                <div class="name">fuwurenyuan</div>
                <div class="code-name">#iconfuwurenyuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfuwuleibie"></use>
                </svg>
                <div class="name">fuwuleibie</div>
                <div class="code-name">#iconfuwuleibie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontousugongdan"></use>
                </svg>
                <div class="name">tousugongdan</div>
                <div class="code-name">#icontousugongdan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconhujiaogongdan"></use>
                </svg>
                <div class="name">hujiaogongdan</div>
                <div class="code-name">#iconhujiaogongdan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconhujiaogunali"></use>
                </svg>
                <div class="name">hujiaogunali</div>
                <div class="code-name">#iconhujiaogunali</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconhujiaoxinxi"></use>
                </svg>
                <div class="name">hujiaoxinxi</div>
                <div class="code-name">#iconhujiaoxinxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconhujiaozhongxin"></use>
                </svg>
                <div class="name">hujiaozhongxin</div>
                <div class="code-name">#iconhujiaozhongxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconmenjinkaquanxian"></use>
                </svg>
                <div class="name">menjinkaquanxian</div>
                <div class="code-name">#iconmenjinkaquanxian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconmenjinkongzhika"></use>
                </svg>
                <div class="name">menjinkongzhika</div>
                <div class="code-name">#iconmenjinkongzhika</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyule"></use>
                </svg>
                <div class="name">yule</div>
                <div class="code-name">#iconyule</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyule_music"></use>
                </svg>
                <div class="name">yule_music</div>
                <div class="code-name">#iconyule_music</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyule_video"></use>
                </svg>
                <div class="name">yule_video</div>
                <div class="code-name">#iconyule_video</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyule_voice"></use>
                </svg>
                <div class="name">yule_voice</div>
                <div class="code-name">#iconyule_voice</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfuwuzuguanli"></use>
                </svg>
                <div class="name">fuwuzuguanli</div>
                <div class="code-name">#iconfuwuzuguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconkongzhika"></use>
                </svg>
                <div class="name">kongzhika</div>
                <div class="code-name">#iconkongzhika</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconmenjinkongzhika1"></use>
                </svg>
                <div class="name">menjinkongzhika</div>
                <div class="code-name">#iconmenjinkongzhika1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconchuangtoupin"></use>
                </svg>
                <div class="name">chuangtoupin</div>
                <div class="code-name">#iconchuangtoupin</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
